scss 不同主题换肤

Basic.scss

$font_common: 14px; //大多数文字
$font_color: #1D253E; //大多数文字颜色
$font_header_title: #CFCFCF;

$themes: (
	blue_theme: (
		color_main:#3054EB, //主色
        color_main_bg: linear-gradient(106deg, #4345FA 0%, #6F4CFF 100%), //主背景
        color_btn_bg:rgba(48, 84, 235, 0.08), //按钮背景
        color_pale_bg: #B0BFFF, //淡背景

        color_header_bg: linear-gradient(106deg, #4345FA 0%, #6F4CFF 100%), // header 背景色
        color_header_txt_hover: #FFF, // header字体hover

    ),
    orange_theme: (color_main:#FF7919, //主色
        color_main_bg: #FF7919, //主背景
        color_btn_bg:rgba(255, 121, 25, 0.08), //按钮背景
        color_pale_bg: #FFC79E, //淡背景

        color_header_bg: #1D253E, // header 背景色
        color_header_txt_hover: #FF7919, // header字体hover
    ),
    red_theme: (color_main:#D7000F, //主色
        color_main_bg: #D7000F, //主背景
        color_btn_bg:rgba(215, 0, 15, 0.08), //按钮背景
        color_pale_bg: #FFB6BB, //淡背景

        color_header_bg: #1D253E, // header 背景色
        color_header_txt_hover: #D7000F, // header字体hover
    )
);

@mixin themeify {
    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map !global;

        [data-theme=#{$theme-name}] & {
            @content;
        }
    }
}

@function themed($key) {
    @return map-get($theme-map, $key);
}

@mixin text_color($color) {
	@include themeify {
        color: themed($color);
    }
}

@mixin bg_color($color) {
    @include themeify {
        background: themed($color);
    }
}

@mixin ellipsis($width) {
    //横排省略号
    width: $width;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@mixin Hellipsis($num, $height) {
    //竖排省略号
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
    line-height: $height / $num;
    max-height: $height;
    overflow: hidden;
}

设置页面标签

document.documentElement.setAttribute(
		'data-theme',
		'blue-theme'
);